@holderWidth: 12px;

.bui-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: min-content;
  height: var(--tab-height);
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-size: var(--font-size);
  line-height: var(--bui-line-height);
  color: var(--color);
  padding: var(--tab-padding);
  font-family: var(--bui-font-family);

  &-active {
    font-size: var(--font-size);
    line-height: var(--bui-line-height);
    font-weight: var(--bui-font-weight-medium);
    color: var(--active-color);
  }

  &-center {
    flex: 1 0 0;
    margin: 0 auto;
  }

  &-miniapp-active {
    font-size: var(--font-size);
    line-height: 1.5;
    font-weight: var(--bui-font-weight-medium);
    color: var(--active-color);
    position: relative;

    &-line {
      position: absolute;
      bottom: 0;
      left: -@holderWidth;
      right: -@holderWidth;
      margin: 0 auto !important;
      width: 18px;
      height: 2px;
      transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
      background-color: var(--bui-color-primary);
    }
  }

  &-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

.bui-tabline-invisible {
  visibility: hidden;
  background-color: transparent;
}
